<template>
  <div>
    <el-row>
      <el-col>
        <el-button icon="el-icon-back"
                   size="small"
                   type="text"
                   @click="$router.go(-1)">返回</el-button>
        <span> | 子任务详情 </span>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8">
        <el-row>
          <el-col :offset="8" style="font-size: 24px; ">字段对应关系</el-col>
        </el-row>
        <el-table ref="knowledgeUnit2KnowledgeTable"
                  :data='editingKnowledge.knowledgeUnitFieldList'
                  :height="tableHeight"
                  stripe border>
          <el-table-column label="素材字段" min-width="150" show-overflow-tooltip>
            <template slot-scope="scope">
              <span v-html="scope.row.name"/>
            </template>
          </el-table-column>
          <el-table-column label="知识字段" min-width="150" show-overflow-tooltip>
            <template slot-scope="scope">
              <span v-if="UTIL.isNotEmpty(scope.row.knowledgeLibFieldId) || UTIL.isNotEmpty(scope.row.knowledgeLibFieldIdDefault)" style="color: green">(固定)</span>
              <span v-else-if="UTIL.isNotEmpty(scope.row.knowledgeLibFieldName) || UTIL.isNotEmpty(scope.row.knowledgeLibFieldNameDefault)" style="color: red">(动态)</span>
              <span v-html="scope.row.knowledgeLibFieldName || scope.row.knowledgeLibFieldNameDefault"/>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="8">
        <el-row>
          <el-col :offset="8" style="font-size: 24px; ">知识单元</el-col>
        </el-row>
        <div :style="{height: tableHeight + 'px', overflow: 'auto', marginLeft: '15px' }">
          <div v-for="item in editingKnowledge.knowledgeUnitFieldList">
            <div style="font-size: 24px; line-height: 50px; " v-html="item.name"></div>
            <div style="overflow: auto; background-color: #F0F8F8;">
              <div style="margin: 10px; " v-html="item.content"></div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <el-row>
          <el-col :offset="8" style="font-size: 24px; ">知识预览</el-col>
        </el-row>
        <KnowledgeDetail ref="knowledgeDetail"
                         :knowledgeId="$store.state.knowledgeDetailId"
                         :knowledgeStatus="$store.state.knowledgeDetailStatus"
                         :parentHeight="tableHeight"
                         :menuDisplayFlag="false"
                         :emptyFieldDisplayFlag="false"/>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import {mapState} from 'vuex'
  import KnowledgeDetail from '../KnowledgeDetail/KnowledgeDetail'
  export default {
    name: "TaskItemDetail",
    components: {KnowledgeDetail},
    data(){
      return {
        tableHeight: CONST.WORKSPACE_HEIGHT - 80,
      }
    },
    computed: {
      ...mapState(['knowledgeList', 'editingKnowledge']),
    },
    methods: {
    },
    created() {
    }
  }
</script>

<style scoped>

</style>
